<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro/easyui.css">
<style type="text/css">
.information{
	width:236px;
	height:120px;
	position:absolute;
	bottom:0px;
	background: #233646;
	border-top:1px solid white;
}
.message-top{
	width:100%;
	height:60px;
}
.message-icon{
	width:50px;
	height:50px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin-left:20px;
    float:left;
    border-radius: 50%;
    border: 3px solid #e4e4e4;
    margin-top:10px;
}
.title-emp{
	cursor: pointer;
    margin: 16px 0 0 20px;
    width: 38px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    background-color: rgba(26,179,148,1);
    border-radius: 3px;
}
.title-message{
	float: right;
    width: 200px;
    height: 30px;
    margin: 22px 0 0 16px;
    font-size: 14px;
}
.title-left{
	color: rgba(26,179,148,1);
    font-weight: 700;
}
.title-right{
	color: #ccc;
}
.fun{
	height:40px;
	display:block;
	font-size:15px;
	width:238px;
	text-align:center;
	background:#233646;
	color:#A5AD98;
	line-height:40px;
	cursor:pointer;
}
.fun:hover{
	background:#1E2E3C;
}
.main-daka>span>span{
	font-size:15px;
}
.color_mu{
background:#1E2E3C;
}
</style>
</head>

<body>
<div class="easyui-layout" data-options="fit:true">
	
	<div data-options="region:'west',collapsible:false" title="功能导航" style="width:240px;overflow:hidden;background:#233646;">
	<div id="aa"  style="width:240px;height:300px;">
   
		<a class="fun" data-href="mysalary" data-options="width:238,border:false">我的薪资</a>
		<a class="fun" data-href="examination" data-options="width:238,border:false">我的审批</a>
		<a class="fun" data-href="checkwork" data-options="width:238,border:false">我的外出</a>
		<a class="fun" data-href="hr-information" data-options="width:238,border:false">我的出差</a>
		<a class="fun" data-href="train-add" data-options="width:238,border:false">我的休假</a>
		<a class="fun" data-href="train-courseku" data-options="width:238,border:false">我的加班</a>
    
    
	</div>
	<!-- 个人信息栏 -->
	<div class="information">
		<div class="message-top">
		<img class="message-icon">
		<div style="float:right;width:120px;">
			<input  type="hidden" id="yuangong_id" value="1">
			<p style="font-size:14px;color:white;">帅峰</p>
			<span style="display:block;color:white;">15292232190</span>
		</div>
		</div>
		<p style="margin:20px 20px;font-size:15px;color:white;">Decade公司</p>
	</div>
	</div>
	<div region="center"  style="overflow:hidden">
		<div style="height:60px;border:solid 1px red;" data-options="fit:true">
			<div style="width:130px;height:100%;font-size:20px;text-align:center;line-height:60px;color:black;float:left">Decade公司</div>
			<div style="height:100%;width:290px;border:solid 1px;float:left">
				<div class="title-emp icon-title-emp"></div>
				<div class="title-message">
					<span class="title-left">员工自助</span>
					<span class="title-right">个人中心</span>
					<span class="title-right"></span> 
				</div>
			</div>
			<div style="height:100%;width:260px;border:solid 1px;float:right">
				<a class="easyui-linkbutton main-daka" id="daka" style="width:90px;height:30px;background:#19AA8D;color:white;font-size:15px;">打卡</a>
				<script type="text/javascript">
					$(function(){
						$("#daka").click(function(){
							var id=$("#yuangong_id").val();
							$.ajax({
								url: "kq_daka", 
								type : "post",
								data: "dakaid="+id,
								success: function(msg){
							    	alert(msg)
								}
							});
						});
					});
				</script>
			</div>
		</div>
		<div id="content" class="easyui-tabs" data-options="fit:true">
			<div title="个人中心" href="people"></div>
			
		</div>
		
	</div>
	 
</div>
</body>
<script type="text/javascript">
			$(function(){
				//点击左边折叠面板中的按钮，创建一个新的tab
				$(".fun").click(function(){

					$(".fun").removeClass("color_mu");
					//改变某些样式
					$(this).addClass("color_mu");
					//获取按钮的文本
					var t = $(this).text();
					var h = $(this).attr("data-href");
					//根据标签页的title内容来判断该标签是否存在
					if($("#content").tabs('getTab',t)){
						//设置为打开
						$("#content").tabs('select',t);
					}else{
						$("#content").tabs("add",{
							href:h,
							title:t,
							selected:true,
							closable:true
						});
					}
				});
		$(".tabs-inner").attr({"background":"#F3F3F3"});
		
			})
</script>
</html>